<!--
 * @Description: 
 * @Autor: codeBo
 * @Date: 2025-05-13 15:07:52
 * @LastEditors: lihaibo@shanshu.ai
 * @LastEditTime: 2025-05-15 14:45:16
-->
<script setup lang="ts">
import { useModalRef } from 'vue-modal-provider'
import FlowChart from './flowChart.vue'
import useDeviceFlowStore from './pinia'

const { visible, hide, resolve, remove } = useModalRef()
const modalRef = ref()
const flowStore = useDeviceFlowStore()
const props = defineProps<{
  caseId: string | number
}>()

const flowLoading = computed(() => {
  return flowStore.loading
})
const cancelFunc = () => {
  hide()
  resolve()
  remove()
  flowStore.reset()
  return Promise.resolve()
}
onMounted(() => {
  //初始化的时候， 应该通过参数， 来获取数据， 且这个参数会传递给点击节点的下一个组件， 组件有返回按钮， 点返回从新打开此流程图页面。
  flowStore.initRef(modalRef, props.caseId)
})
</script>

<template>
  <vxe-modal
    ref="modalRef"
    title="装置详情流向图"
    id="deviceFlowChart"
    v-model="visible"
    :loading="flowLoading"
    className="flow-dialog  deviceFlowChart"
    show-cancel-button
    :destroy-on-close="true"
    resize
    showMaximize
    :before-hide-method="cancelFunc"
    width="90vw"
    height="90vh"
  >
    <FlowChart />
  </vxe-modal>
</template>

<style lang="scss">
@import './index.scss';
</style>
